<template>
    <div class="app-container">
        <el-form ref="form" :model="form" label-width="120px" size="medium">
        <div style="display: flex">
            <el-form-item label="产品编号" prop="technologyNo" >
                <el-input clearable v-model="form.technologyNo" @change="changeNo" @blur="checkExist(form.technologyNo)" style="width:300px" />
            </el-form-item>
            <el-form-item label="工序" prop="processOrder" >
                <el-cascader collapse-tags :props="props" v-model="form.processOrder" :options="serialList" clearable class="ul-item"/>
            </el-form-item>
        </div>
            <el-form-item label="文档上传">
                <el-upload
                class="avatar-uploader"
                action="http://192.168.3.11:8086/technologyFile"
                :on-success="handlePdfSuccess"
                :on-remove = "removePdf"
                :on-change= "pdfRemove"
                :headers="getHttpHeader"
                :before-upload="beforeFilsUpload">  
                <!-- <img v-if="form.pdfUrl" :src="form.pdfUrl" class="avatar"> -->
                <!-- object标签用于包含对象，比如图像、音频、视频、java applets、ActiveX、PDF以及Flash -->
                <object v-if="form.pdfUrl" :data="form.pdfUrl" type="application/pdf" width="420px" height="600px" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="文档上传(选填)">
                <el-upload
                class="avatar-uploader"
                action="http://192.168.3.11:8086/technologyFile"
                :on-success="handlePdfSuccess1"
                :on-remove = "removePdf1"
                :on-change= "pdfRemove"
                :headers="getHttpHeader"
                :before-upload="beforeFilsUpload">
                <!-- <img v-if="form.pdfUrl" :src="form.pdfUrl" class="avatar"> -->
                <!-- object标签用于包含对象，比如图像、音频、视频、java applets、ActiveX、PDF以及Flash -->
                <object v-if="form.pdfUrl1" :data="form.pdfUrl1" type="application/pdf" width="420px" height="600px" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="视频上传">
                <el-upload
                class="avatar-uploader"
                action="http://192.168.3.11:8086/technologyFile"
                :on-success="handleVideoSuccess"
                :on-change= "pdfRemove"
                :headers="getHttpHeader"
                :before-upload="beforeFilsUpload">
                <video v-if="form.videoUrl" autoplay loop :src="form.videoUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">添加</el-button>
                <el-button type="primary" @click="resetForm('form')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { getProcessList } from "@/api/processRoute"
import { addTechnologyFile, checkTechnology, deleteFiles } from '@/api/filesUpload.js'
export default {
    name: 'add_Pdf',
    data() {
        return {
            serialList:[],
            form: {
                technologyNo: '',               //产品编号
                pdfUrl: '',                     //指导PDF文件的链接
                pdfUrl1: '',                     //指导PDF1文件的链接
                videoUrl: ''                    //指导视频文件的链接        
            },
            getHttpHeader: {                    //上传文件的头
                Authorization: '',              //传输文件的token
                CHECK_USER_VALUE: 'GOLWAY',
                CHECK_PASSWORD_VALUE: '8D4DD3F80CEB6149329FDBD590B164F1'
            },
            props: { multiple: true },
        }
    },
    methods: {
        changeNo(){
            this.serialList = []
        },
        // 获取工序
        async getProcessList(technologyNo){
            this.serialList = []
            if(!technologyNo) return
            let data = await getProcessList({technologyNo: technologyNo,technologyEnd: technologyNo})
            let errmsg = data.msg
            if(data.code == '500') return
            if(data.code != '1') return this.$message.error(errmsg)
            data.data.records.forEach(item=>{
                let obj = {}
                obj.value = item.processOrder
                obj.label = item.processOrder
                this.serialList.push(obj)
            })
        },
        // 文件上传之前的函数，将token传入头中
        beforeFilsUpload(file) {
            this.getHttpHeader.Authorization = this.dealCookie()
        },
        // cookies的处理函数
        dealCookie() {
            const strcookie = document.cookie                     //获取cookie字符串
            const arrcookie = strcookie.split("; ")               //分割
            for ( var i = 0; i < arrcookie.length; i++) {
                const arr = arrcookie[i].split("=")
                if (arr[0] == "agent_Authorization") {
                    return arr[1]
                }
            }
            return ""
        },
        // 上传PDF文档成功回调函数
        handlePdfSuccess(response) {
            console.log(response)
            this.form.pdfUrl = response.results
            console.log(11,this.form.pdfUrl)
        },
        // 上传PDF文档1成功回调函数
        handlePdfSuccess1(response) {
            this.form.pdfUrl1 = response.results
            console.log(11,this.form.pdfUrl1)
        },
        // 上传视频成功回调函数
        handleVideoSuccess(response) {
            this.form.videoUrl = response.results
            console.log(11,this.form.videoUrl)
        },
        pdfRemove(e){
            if(e.status == 'fail') return this.$message.error("文件上传失败!")
            else if(e.status == 'success') return this.$message.success("文件上传成功!")
        },
        // 移除pdf
        async removePdf(file) {
            return this.form.pdfUrl = ''
            const {data} = await deleteFiles({image: this.form.pdfUrl})
            this.form.pdfUrl = ''
            console.log(file,'removePdf')
        },
        // 移除pdf1
        async removePdf1(file) {
            return this.form.pdfUrl1 = ''
            const {data} = await deleteFiles({image: this.form.pdfUrl1})
            this.form.pdfUrl1 = ''
            console.log(file,'removePdf')
        },
        // 表单上传函数
        async submitForm() {
            const query = Object.assign({},this.form)
            if(this.form.processOrder){
                for(let i = 0; i < this.form.processOrder.length; i++){
                    query.processOrder = this.form.processOrder[i][0]
                    const data = await addTechnologyFile(query)
                    const errMsg = data.msg
                    if(data.code == '500') return
                    if(data.code != '1') return this.$message.error(errMsg)
                    this.$message.success(errMsg)
                }
            }else{
                const data = await addTechnologyFile(query)
                const errMsg = data.msg
                if(data.code=='1') {
                    this.$message ({
                        type: 'success',
                        message: errMsg
                    })
                } else {
                    this.$message ({
                        type: 'warning',
                        message: errMsg
                    })
                }
            }
        },
        // 检验technologyNo产品编号是否存在
        async checkExist(technologyNo) {
            const data = await checkTechnology({technologyNo: this.form.technologyNo})
            console.log(data)
            const errMsg = data.msg
            if(data.code=='1'){
                this.$message({
                    type: 'success',
                    message: errMsg
                })
                this.serialList = []
                let res = await getProcessList({technologyNo: technologyNo,technologyEnd: technologyNo})
                let errmsg = res.msg
                if(res.code == '500') return
                if(res.code != '1') return this.$message.error(errmsg)
                res.data.records.forEach(item=>{
                    let obj = {}
                    obj.value = item.processOrder
                    obj.label = item.processOrder
                    this.serialList.push(obj)
                })
            } else {
                this.$message({
                    type: 'warning',
                    message: errMsg
                })
            }
        }
    }
}
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
